<script lang="ts" setup>
import type { CommentApi } from '#/api/wedding/comment';

import { ref, computed } from 'vue';

import { Button, Input, message, Avatar, Rate, Image, Space, Divider } from 'ant-design-vue';
import { IconifyIcon } from '@vben/icons';

import { createComment, toggleLike, replyComment } from '#/api/wedding/comment';

const props = defineProps<{
  targetType: 'dress' | 'photographer' | 'makeupartist' | 'package';
  targetId: number;
  targetName: string;
  disabled?: boolean;
}>();

const emit = defineEmits<{
  success: [];
}>();

const showReplyBox = ref(false);
const replyContent = ref('');
const replyRating = ref(5);
const submitting = ref(false);

// 提交评论
async function handleSubmit() {
  if (!replyContent.value.trim()) {
    message.warning('请输入评论内容');
    return;
  }

  try {
    submitting.value = true;
    await createComment({
      targetType: props.targetType,
      targetId: props.targetId,
      content: replyContent.value.trim(),
      rating: replyRating.value,
      status: 'pending',
    });

    message.success('评论提交成功，等待审核');
    replyContent.value = '';
    replyRating.value = 5;
    showReplyBox.value = false;
    emit('success');
  } catch (error) {
    message.error('评论提交失败');
  } finally {
    submitting.value = false;
  }
}

// 取消评论
function handleCancel() {
  replyContent.value = '';
  replyRating.value = 5;
  showReplyBox.value = false;
}
</script>

<template>
  <div class="comment-box">
    <!-- 评论输入框 -->
    <div v-if="!showReplyBox" class="mb-4">
      <Button 
        type="primary" 
        :disabled="disabled"
        @click="showReplyBox = true"
        class="w-full"
      >
        <template #icon>
          <IconifyIcon icon="lucide:message-circle" />
        </template>
        写评论
      </Button>
    </div>

    <!-- 评论表单 -->
    <div v-if="showReplyBox" class="bg-gray-50 p-4 rounded-lg">
      <div class="mb-3">
        <label class="block text-sm font-medium text-gray-700 mb-2">
          为 {{ targetName }} 评分
        </label>
        <Rate v-model:value="replyRating" :disabled="disabled" />
      </div>

      <div class="mb-3">
        <label class="block text-sm font-medium text-gray-700 mb-2">
          评论内容
        </label>
        <Input.TextArea
          v-model:value="replyContent"
          :disabled="disabled"
          placeholder="分享您的使用体验..."
          :rows="4"
          :maxlength="500"
          show-count
        />
      </div>

      <div class="flex justify-end gap-2">
        <Button @click="handleCancel" :disabled="submitting">
          取消
        </Button>
        <Button 
          type="primary" 
          :loading="submitting"
          :disabled="disabled || !replyContent.trim()"
          @click="handleSubmit"
        >
          提交评论
        </Button>
      </div>
    </div>
  </div>
</template>

<style scoped>
.comment-box {
  @apply w-full;
}
</style>
